import React from "react";
import './processLine.less'

class ProcessLine extends React.Component{
    constructor(props){
        super(props)
        this.state={
            pointList:[
                {
                    name:'point_1',
                    left:'0',
                    active:false,

                },
                {
                    name:'point_2',
                    left:'25%',
                    active:false,
                    
                },
                {
                    name:'point_3',
                    left:'50%',
                    active:false,
                    
                },
                {
                    name:'point_4',
                    left:'75%',
                    active:false,
                    
                },
                {
                    name:'point_5',
                    left:'calc(100% - 1px)',
                    active:false,
                    
                }
            ],
            domLeft:0,
            domWidth:0,
            clickPoint:false,
            per:0
        }
        this.clickProcess = this.clickProcess.bind(this);
        this.mouseDown = this.mouseDown.bind(this);
        this.mouseMove = this.mouseMove.bind(this);
        this.mouseUp   =  this.mouseUp.bind(this);
        this.configeDistanc = this.configeDistanc.bind(this);
        this.mouseLeave = this.mouseLeave.bind(this);
        this.processPosition = this.processPosition.bind(this);
        // this.clickPoint = this.clickPoint.bind(this);
    }
    componentDidMount(){
        this.setState({
            domLeft:document.getElementsByClassName('process')[0].offsetLeft,
            domWidth:document.getElementsByClassName('process')[0].offsetWidth,
        })
    }
    clickProcess(e){
        let _w  = e.clientX;
        this.configeDistanc(_w)
    }
    configeDistanc(w){
        let {domLeft,domWidth} = this.state;
        let distance =  w - domLeft - 10;
        if(distance < 0){
            distance = 0;
        }
        if(distance > domWidth){
            distance = domWidth;
        }
        let per = (distance / domWidth * 100).toFixed();
        this.setState({
            per
        },() =>this.processPosition(per))
       
    }
    mouseDown(){
        this.setState({
            clickPoint:true
        })
    }
    mouseUp(){
        this.setState({
            clickPoint:false
        })
        
    }
    mouseMove(e){
        let {clickPoint} = this.state;
        let _w  = e.clientX;
        clickPoint && this.configeDistanc(_w)
    }
    mouseLeave(){
        this.setState({
            clickPoint:false
        })
    }
    clickPoint(index,e){
        e.stopPropagation();
        const actions = new Map([
            [0,() => this.setState({per:0},() => this.processPosition(this.state.per))],
            [1,() => this.setState({per:25},() => this.processPosition(this.state.per))],
            [2,() => this.setState({per:50},() => this.processPosition(this.state.per))],
            [3,() => this.setState({per:75},() => this.processPosition(this.state.per))],
            [4,() => this.setState({per:100},() => this.processPosition(this.state.per))],

        ])
         let action = actions.get(index || 0);
         action.call(this)
    }
    processPosition(per){
        let {pointList} = this.state;
        if(per < 25){
            pointList.map((item,index) =>{
                pointList[index]['active'] = false;
                pointList[0]['active'] = true;
            })
        }
        if(per >= 25 && per < 50){
            pointList.map((item,index) =>{
                pointList[index]['active'] = false;
                pointList[0]['active'] = true;
                pointList[1]['active'] = true;
            })
        }
        if(per >= 50 && per < 75){
            pointList.map((item,index) =>{
                pointList[index]['active'] = false;
                pointList[0]['active'] = true;
                pointList[1]['active'] = true;
                pointList[2]['active'] = true;
            })
        }
        if(per >= 75 && per < 100){
            pointList.map((item,index) =>{
                pointList[index]['active'] = false;
                pointList[0]['active'] = true;
                pointList[1]['active'] = true;
                pointList[2]['active'] = true;
                pointList[3]['active'] = true;
            })
        }
        if(per >= 100){
            pointList.map((item,index) =>{
                pointList[index]['active'] = true;
            })
        }

       this.setState({
            pointList
       })
    }
    render(){
        let {pointList,processL,per,clickPoint} = this.state;
        return(
            <div className="process" onClick={this.clickProcess} onMouseMove={this.mouseMove} onMouseUp={this.mouseUp} onMouseLeave={this.mouseLeave}>
               <span className="baseLine"></span>
                {
                    pointList.map((item,index) =>{
                        return (
                            <span key={item.name} onClick={(e) => this.clickPoint(index,e)} className={`point ${item.active && 'active'}`} style={{left:item.left}}></span>
                        )
                    })
                }
                <span style={{width:per + '%'}} className="activeLine"></span>
                <span className="processPoint" onMouseDown={this.mouseDown}   style={{left : per + '%'}}>
                    <em style={{display:clickPoint?'block':''}}>{per}%</em>
                </span>
            </div>
        )
    }
}



export default ProcessLine;